<style>
    #about-set:hover {
        color: #0969da !important;
        fill: currentColor;
        cursor: pointer;
    }
</style>
<h2 class="f4 width-full">
    <span class="col-5 d-inline-block">About</span>
    {% if user.session %}
    <span class="col-6 text-right d-inline-block">
        <details id="repo-profile-details" class="details-reset details-overlay details-overlay-dark">
            <summary id="overviews-up" class="btn-link Link--muted" aria-haspopup="dialog">
                <svg id="about-set" aria-label="Edit repository metadata" role="img" height="16" viewBox="0 0 16 16"
                    version="1.1" width="16" data-view-component="true">
                    <path fill-rule="evenodd"
                        d="M7.429 1.525a6.593 6.593 0 011.142 0c.036.003.108.036.137.146l.289 1.105c.147.56.55.967.997 1.189.174.086.341.183.501.29.417.278.97.423 1.53.27l1.102-.303c.11-.03.175.016.195.046.219.31.41.641.573.989.014.031.022.11-.059.19l-.815.806c-.411.406-.562.957-.53 1.456a4.588 4.588 0 010 .582c-.032.499.119 1.05.53 1.456l.815.806c.08.08.073.159.059.19a6.494 6.494 0 01-.573.99c-.02.029-.086.074-.195.045l-1.103-.303c-.559-.153-1.112-.008-1.529.27-.16.107-.327.204-.5.29-.449.222-.851.628-.998 1.189l-.289 1.105c-.029.11-.101.143-.137.146a6.613 6.613 0 01-1.142 0c-.036-.003-.108-.037-.137-.146l-.289-1.105c-.147-.56-.55-.967-.997-1.189a4.502 4.502 0 01-.501-.29c-.417-.278-.97-.423-1.53-.27l-1.102.303c-.11.03-.175-.016-.195-.046a6.492 6.492 0 01-.573-.989c-.014-.031-.022-.11.059-.19l.815-.806c.411-.406.562-.957.53-1.456a4.587 4.587 0 010-.582c.032-.499-.119-1.05-.53-1.456l-.815-.806c-.08-.08-.073-.159-.059-.19a6.44 6.44 0 01.573-.99c.02-.029.086-.075.195-.045l1.103.303c.559.153 1.112.008 1.529-.27.16-.107.327-.204.5-.29.449-.222.851-.628.998-1.189l.289-1.105c.029-.11.101-.143.137-.146zM8 0c-.236 0-.47.01-.701.03-.743.065-1.29.615-1.458 1.261l-.29 1.106c-.017.066-.078.158-.211.224a5.994 5.994 0 00-.668.386c-.123.082-.233.09-.3.071L3.27 2.776c-.644-.177-1.392.02-1.82.63a7.977 7.977 0 00-.704 1.217c-.315.675-.111 1.422.363 1.891l.815.806c.05.048.098.147.088.294a6.084 6.084 0 000 .772c.01.147-.038.246-.088.294l-.815.806c-.474.469-.678 1.216-.363 1.891.2.428.436.835.704 1.218.428.609 1.176.806 1.82.63l1.103-.303c.066-.019.176-.011.299.071.213.143.436.272.668.386.133.066.194.158.212.224l.289 1.106c.169.646.715 1.196 1.458 1.26a8.094 8.094 0 001.402 0c.743-.064 1.29-.614 1.458-1.26l.29-1.106c.017-.066.078-.158.211-.224a5.98 5.98 0 00.668-.386c.123-.082.233-.09.3-.071l1.102.302c.644.177 1.392-.02 1.82-.63.268-.382.505-.789.704-1.217.315-.675.111-1.422-.364-1.891l-.814-.806c-.05-.048-.098-.147-.088-.294a6.1 6.1 0 000-.772c-.01-.147.039-.246.088-.294l.814-.806c.475-.469.679-1.216.364-1.891a7.992 7.992 0 00-.704-1.218c-.428-.609-1.176-.806-1.82-.63l-1.103.303c-.066.019-.176.011-.299-.071a5.991 5.991 0 00-.668-.386c-.133-.066-.194-.158-.212-.224L10.16 1.29C9.99.645 9.444.095 8.701.031A8.094 8.094 0 008 0zm1.5 8a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM11 8a3 3 0 11-6 0 3 3 0 016 0z">
                    </path>
                </svg>
            </summary>
            <style>
                details-dialog {
                    position: fixed;
                    top: 50%;
                    z-index: 111;
                    left: 50%;
                    transform: translate3d(-50%, -50%, 0);
                    max-height: 80vh;
                    max-width: 448px;
                    min-width: 300px;
                    width: 80%;
                }
            </style>
            <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast">
                <div class="Box-header text-left">
                    <button id="overviews-exit" class="Box-btn-octicon btn-octicon float-right" type="button"
                        aria-label="Close dialog" data-close-dialog>
                        <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16"
                            aria-hidden="true">
                            <path fill-rule="evenodd"
                                d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z">
                            </path>
                        </svg>
                    </button>
                    <script>
                        $('#overviews-exit').on('click', function () {
                            $("#repo-profile-details")[0].open = false
                        })
                    </script>
                    <h3>Edit repository details</h3>
                </div>
                <div class="overflow-auto text-left">
                    <div class="Box-body overflow-auto">
                        <form id="repo-profile-form">
                            <input name="repo" value="{{ repo.name }}" hidden type="text">
                            <label class="width-full d-block mb-1" for="description">Description</label>
                            <textarea name="description" rows="3" maxlength="160"
                                class="form-control color-bg-default width-full" id="description"></textarea>
                            <script>
                                $('textarea[name="description"]').val("{{ repo.profile.description }}")
                            </script>
                            <label class="width-full d-block mb-1" for="website">Website</label>
                            <input name="website" id="website" value="{{ repo.profile.website }}"
                                class="form-control width-full" type="text" placeholder="website"
                                aria-label="website" />
                        </form>
                    </div>
                </div>
                <div class="Box-footer clearfix">
                    <button id="repo-profile-submit" type="button" class="btn btn-primary float-right"
                        data-close-dialog>
                        Save pins
                    </button>
                </div>
                <script>
                    $('#repo-profile-submit').on('click', function () {
                        var formData = new FormData($('#repo-profile-form')[0])
                        $.ajax({
                            url: '{{ROOT}}manage/user/repo/profile',
                            method: 'PUT',
                            data: formData,
                            processData: false,
                            contentType: false,
                            success(res) {
                                if (res.code === 20000) {
                                    location.href = location.href
                                    // Object.assign(originOverviews, selected)
                                } else {
                                    alert(res.message)
                                }
                            }
                        })
                    })
                </script>
            </details-dialog>
        </details>
    </span>
    {% endif %}
</h2>
<div class="mt-4 f5 pb-3 border-bottom">
    {{ repo.profile.description }}
</div>
<h2 class="mt-4 f4 width-full">
    <span class="d-inline-block">Website</span>
</h2>
<div class="mt-3 pb-3 border-bottom f6">
    <a class="Link--primary" target="_blank" href="{{ repo.profile.website }}">{{ repo.profile.website }}</a>
</div>